<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui/css/layui.css">
  <link rel="stylesheet" href="./transfer.css">
</head>

<body>
  <div class="layui-btn-container">
    <button type="button" class="layui-btn layui-btn-sm" transfer-demo="getTransferData">获取数据</button>
    <button type="button" class="layui-btn layui-btn-sm" transfer-demo="reload">重载实例</button>
  </div>
  <div id="transfer"></div>
  <script src="layui/layui.js"></script>
  <script src="./transfer.js"></script>
  <script>
    var data = [{
      title: '早餐'
      ,children: [{
        title: '油条'
      },{
        title: '包子'
      },{
        title: '豆浆'
      }]
    }, {
      title: '午餐'
      , children: [{
        title: '藜蒿炒腊肉'
      }, {
        title: '西湖醋鱼'
      }, {
        title: '小白菜'
      }, {
        title: '海带排骨汤'
      }]
    }, {
      title: '晚餐'
      , children: [{
        title: '红烧肉'
      }, {
        title: '番茄炒蛋'
      }]
    }, {
      title: '夜宵'
      , children: [{
        title: '小龙虾'
      }, {
        title: '香辣蟹'
      }, {
        title: '烤鱿鱼'
      }]
      },
      {
        title: '零食',
      }];
    var transfer = new Transfer()
    //显示搜索框
    transfer.render({
      elem: '#transfer',
      // 全部数据
      data: data,
      // 已选择数据，默认在右边
      value:[{
        title: '零食'
      },{
        title: '早餐'
        ,children: [{
          title: '油条'
        },{
          title: '包子'
        },{
          title: '豆浆'
        }]
      }],
      title: ['已配置', '未配置'],
      // 是否展示关键词搜索
      showSearch: true,
      // 初始化的所有菜单在 右侧 ,默认 左侧
       isRight:true,
       // 菜单二级全展开
       spread:true
    })
    var util = layui.util
    //按钮事件
    util.event('transfer-demo', {
      getTransferData: function () {
        console.log('leftTree',transfer.leftTree);
        console.log('rightTree',transfer.rightTree);
        console.log('allTree',transfer.allTree);
        console.log('getTransferData',transfer.getTransferData());
    },
      reload: function () {
        //重载实例
        transfer.reload()
      }
    });
  </script>
</body>

</html>